-
Notifications
You must be signed in to change notification settings - Fork 46.9k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Fix #4963 - SVG <use> swallows click events #5720
Conversation
This is a bug that we are experiencing in our team as well. I have verified that your solution works. I hope that this will be merged asap. |
Looks legit to me, cc @spicyj for sanity check. |
@@ -20,6 +20,12 @@ | |||
*/ | |||
function getEventTarget(nativeEvent) { | |||
var target = nativeEvent.target || nativeEvent.srcElement || window; | |||
|
|||
// Normalize SVG <use> element events #4963 | |||
if (target.correspondingUseElement && !target.nodeType) { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
What is target such that it doesn't have a nodeType?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
It seems to me like the !target.nodeType
doesn't to anything really. If the target has a correspondingUseElement
property, the target must be an instance of SVGElementInstance
and lives in the shadow DOM. Such elements do not have a nodeType
property, and therefore it will always be falsy. Perhaps the check is present for some weird browser bugs? @edmellum
https://www.w3.org/TR/SVG/single-page.html#struct-__svg__SVGElementInstance__correspondingUseElement
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I've looked over and retested everything. !target.nodeType
is a relic from my exploration during early implementation that only partially solved the issues on IE, whereas correspondingUseElement
properly solves it. I'll remove it and rebase onto the current commit so there's no noise to merge.
As mentioned in the line notes I've fixed the |
@edmellum updated the pull request. |
Fix #4963 - SVG <use> swallows click events
Thanks @edmellum! |
👍 |
I don't understand this crap
|
@shastings86 care to elaborate? Also, please watch your attitude; at first glance, your comment appears to be very negative and not constructive - which is not the type of community we want to foster. |
I can't read it On February 17, 2016, at 12:37 PM, Jim notifications@github.com wrote: @shastings86 care to elaborate? Also, please watch your attitude; at first glance, your comment appears to be very negative and not constructive - which is not the type of community we want to foster. — |
Thank you for this fix! It was a strange bug that took us a while to find. |
I have no idea, as soon as I posted the comment that showed up... |
@justo thanks, I've seen it a couple other times recently. It looks like its potentially a bug with Github. |
Info about the issue in #4963
This fix uses the corresponding
<use>
element as the target of a click handler instead of the<svg>
it refers to, thereby normalizing the behavior of IE, Edge and iOS to the behavior of Chrome. Without this fix there is no way to handle click events on<use>
elements in the aforementioned browsers as their target becomes the referred to<svg>
which may be far outside of the attached click handler causing it to be dropped.